<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta charset="utf-8" />
  <title>米塔企业微云</title>
  <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
  <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
  <link href="../customize/css/iconfont.css" rel="stylesheet">
  <link href="../customize/css/content.css" rel="stylesheet">
  <style>
    .user-info-right{ width: 527px; height: 699px; background: url(../customize/images/user-info-right.png) no-repeat;
      padding: 145px 75px 0;}
    .user-info-right .table{ border-collapse: separate;}
    .user-info-right .table td{ background: #011734; border: 1px solid #0096FF; padding: 7px 16px;}
    .user-info-right .table td:nth-child(2):hover{ background: radial-gradient(rgba(0,36,63,0.06), #0056d4);;}
    .user-info-right .table tr td:nth-child(1){ color: #0096FF;}
    .t_label{
      min-width:100px;
    }
  </style>
</head>
<body>
    <div class="main-content d-flex align-items-center justify-content-around" style="padding-top: 80px;padding-bottom: 100px;">
      <div>
        <img src="../customize/images/user-info-left.png" alt="">
      </div>
      <div class="user-info-right" id="userInfo_tb">
        <table class="table" cellspacing="10">
          <tbody>
            <tr>
              <td class="t_label">用户名</td>
              <td class="t_value" id="t_username"></td>
            </tr>
            <tr>
              <td class="t_label">手机号</td>
              <td class="t_value" id="t_phone"></td>
            </tr>
            <tr>
              <td class="t_label">角色</td>
              <td class="t_value" id="t_roleName"></td>
            </tr>
            <tr>
              <td class="t_label">组织</td>
              <td class="t_value" id="t_orgName"></td>
            </tr>
            <tr>
              <td class="t_label">权限区域</td>
              <td class="t_value" style="height:40px;overflow-y:scroll;white-space: normal;display: -webkit-box;">
                  <div id="t_areaName"></div>
              </td>
            </tr>
            <tr>
              <td class="t_label">访问状态</td>
              <td class="t_value" id="t_status"></td>
            </tr>
            <tr>
              <td class="t_label">有效期</td>
              <td class="t_value" id="t_expire"></td>
            </tr>
            <tr>
              <td class="t_label">备注</td>
              <td class="t_value" id="t_desc"></td>
            </tr>
          </tbody>
        </table>
        <div class="text-right" style="margin: 0 10px">
          <button class="btn btn-outline-success" type="button"  onclick="changePhone()"><i class="iconfont icon-xiugaishoujiicon1"></i> 更换手机号</button>
          <button class="btn btn-outline-danger ml-2" type="button" data-toggle="modal" data-target="#changePasswordModal"><i class="iconfont icon-kaisuoicon"></i> 修改密码</button>
        </div>
      </div>
    </div>
  <!-- Modal -->
  <div class="modal fade" id="changePasswordModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <form class="modal-content" id="changePasswordForm">
        <div class="modal-header">
          <div class="section-title mb-3">
            <span id="modal_title">修改密码</span>
            <span class="title-icon"></span>
          </div>
          <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="oldPassword">原密码<span class="form-required">*</span></label>
            <div class="col-sm-8">
              <input class="form-control" type="password" name="oldPassword" id="oldPassword">
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="newPassword">新密码<span class="form-required">*</span></label>
            <div class="col-sm-8">
              <input class="form-control" type="password" name="newPassword" id="newPassword">
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="newPassword2">再次输入<span class="form-required">*</span></label>
            <div class="col-sm-8">
              <input class="form-control" type="password" name="newPassword2" id="newPassword2">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-success ml-4">提交保存</button>
        </div>
      </form>
    </div>
  </div>
  <script src="../plugins/jquery-3.4.1.min.js"></script>
  <script src="../plugins/bootstrap/bootstrap.bundle.min.js"></script>
  <script src="../plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
  <script src="../plugins/bootstrapValidator/zh_CN.js"></script>
  <script src="../plugins/alert.js"></script>
  <script src="../plugins/echarts.min.js"></script>
  <script src="../plugins/jquery.cookie.js"></script>
  <script src="../customize/js/CommonUtils.js"></script>
  <script src="../customize/js/common.js"></script>
  <script src="../customize/js/customModalV2.js"></script>
<script>
  $(function () {
      getUserInfo();
      passwordValidation();
      userInfo($('#userInfo'));
  });

  function changePhone() {
    top.location.href = 'changePhone.html'
  }
$('#changePasswordModal').on('hidden.bs.modal', function () {
    var form = $("#changePasswordForm");
    form.data('bootstrapValidator').destroy();
    form.data('bootstrapValidator', null);
    passwordValidation();
    form[0].reset();//清空表单
});

function getUserInfo() {
    getJson('/sys/userInfo',null,'GET',function (data) {
        if(data['code']==200) {
          var info = data['payload']['data'];
            $('#t_username').text(info['displayName']);
            $('#t_phone').text(info['username']);
            if(info['roleSet'] && info['roleSet'].length>0){
                $('#t_roleName').text(info['roleSet'][0]['roleName']);
            }
          var orgList = [];
            if(info['organization']){
                $('#t_orgName').text(info['organization']['name']);
                if(info['organization']['areaSet']){
                  console.log(info['organization']['areaSet'])
                  info['organization']['areaSet'].map(function (org) {
                    orgList.push(org['name']);
                  })
                    $('#t_areaName').text(orgList.join(','));
                    $('#t_areaName').attr('title',orgList.join(','));
                }
            }
            $('#t_status').text(info['status']==0?'禁用':'启用');
            $('#t_expire').text(info['expire']==null?'永久':getDate(info['expire']).datetime());
            $('#t_desc').text(info['desc']);
        }
    })
}

  function passwordValidation() {
      $('#changePasswordForm').bootstrapValidator({
          feedbackIcons: {
              valid: 'fa fa-check',

              validating: 'fa fa-sync-alt'
          },
          fields: {
              oldPassword: {
                  validators: {
                      notEmpty: {},
                      stringLength: {
                          min: 4,
                          max: 20,
                      }
                  }
              },
              newPassword: {
                  validators: {
                      notEmpty: {},
                      stringLength: {
                          min: 4,
                          max: 20,
                      },
                      identical: {
                          field: 'newPassword2',
                          message: '两次输入的密码需保持一致'
                      }
                  }
              },
              newPassword2: {
                  validators: {
                      notEmpty: {},
                      stringLength: {
                          min: 4,
                          max: 20,
                      },
                      identical: {
                          field: 'newPassword',
                          message: '两次输入的密码需保持一致'
                      }
                  }
              }
          }
      }).on('success.form.bv', function (e) {
          //防止表单提交
          e.preventDefault();
          //获取表单实例
          var $form = $(e.target);
          //获取BootstrapValidator实例
          jQuery.support.cors = true;
          var bv = $form.data('bootstrapValidator');
          getJson('/sys/changePassword', {
              oldPassword: $('#oldPassword').val(),
              newPassword: $('#newPassword').val()
          }, 'POST', function (data) {
              $('#changePasswordModal').modal('hide');
              myAlert("提示", data['message'], function () {
                  if (data['code'] == 200) {
                      top.location.href = loginPage;
                  }
              });
          });
      }).on('error.form.bv', function (e) { //点击提交验证失败之后
          $('[type="submit"]').removeAttr("disabled");
      });
  }
</script>
</body>
</html>
